<template>
    <div class="module2">
        <header>
            <h2>用户信息</h2>
            <div class="numInfo">
                <div class="allUser">
                    <img src="../assets/img/userInfo.png" alt="">
                    <span>总用户数</span>
                    <span style="color: #F8E71C;">600</span>
                </div>
                <div class="todayUser">
                    <img src="../assets/img/addUser.png" alt="">
                    <span>今日新增</span>
                    <span style="color: #7BCB53;">8</span>
                </div>
            </div>
        </header>
        <div id="map2"></div>
        <div class="payUser">
            <div class="item">
                <!-- <img src="../assets/img/alipay.png" alt=""> -->
                <span>一星用户</span>
                <div class="proportion">
                    <div style="background-color: #0293FD;width: 50%"></div>
                </div>
                <span>40</span>
            </div>
            <div class="item">
                <!-- <img src="../assets/img/wechart.png" alt=""> -->
                <span>二星用户</span>
                <div class="proportion">
                    <div style="background-color: #A7E331;width: 60%"></div>
                </div>
                <span>100</span>
            </div>
            <div class="item">
                <!-- <img src="../assets/img/bankCard.png" alt=""> -->
                <span>三星用户</span>
                <div class="proportion">
                    <div style="background-color: #FFDC44;width: 70%"></div>
                </div>
                <span>400</span>
            </div>
        </div>
    </div>
</template>

<script>
import * as echarts from "echarts"
export default {
    name: "module2",
    mounted() {
        this.mapLoad();
    },
    methods: {
        mapLoad() {
            let chart = echarts.init(document.getElementById("map2"));
            chart.setOption({
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,
                        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: 'Line 1',
                        type: 'line',
                        stack: '总量',
                        smooth: true,
                        lineStyle: {
                            width: 0
                        },
                        showSymbol: false,
                        areaStyle: {
                            opacity: 0.8,
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#F8E71C'
                            }, {
                                offset: 1,
                                color: '#F8E71C'
                            }])
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        data: [140, 232, 101, 264, 90, 340, 250]
                    },
                    {
                        name: 'Line 2',
                        type: 'line',
                        stack: '总量',
                        smooth: true,
                        lineStyle: {
                            width: 0
                        },
                        showSymbol: false,
                        areaStyle: {
                            opacity: 0.8,
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#7BCB53'
                            }, {
                                offset: 1,
                                color: '#7BCB53'
                            }])
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        data: [120, 282, 111, 234, 220, 340, 310]
                    }
                ]
            })
        }
    }
}
</script>

<style scoped>
.module2 {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.module2 header {
    padding: 12px 36px 0;
}
.module2 header h2 {
    color: #fff;
    font-size: 18px;
    position: relative;
}
.module2 header h2::after {
    content: "";
    display: block;
    width: 4px;
    height: 100%;
    position: absolute;
    top: 0;
    left: -12px;
    background-color: #02C6FF;
}
.module2 header .numInfo {
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    padding: 12px 0;
    display: flex;
    justify-content: space-around;
}
header .numInfo div {
    display: flex;
    align-items: center;
}
header .numInfo div img {
    width: 16px;
}
header .numInfo div span {
    padding: 0 6px;
}
.module2 #map2 {
    flex: 3;
}
.module2 .payUser {
    flex: 2;
    color: #80AFC6;
    font-size: 14px;
    font-weight: bold;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
.module2 .payUser .item {
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.module2 .payUser .item span {
    min-width: 70px;
    text-align: center;
}
.module2 .payUser .item .proportion {
    width: 220px;
    height: 25px;
    
}
.module2 .payUser .item .proportion div {
    height: 100%;
    border-radius: 19px;
}
.module2 .item img {
    width: 27px;
    padding-left: 12px;
}
</style>